<template>
  <!-- 歌手 -->
  <div style="margin-bottom: 40px">
    <div class="content">
      <div v-for="item in data" :key="item.id" class="contentBox">
        <el-card shadow="always" :body-style="{ padding: '0px' }">
          <el-image :src="item.picUrl" @click="getItem(item.id)" lazy>
            <div slot="placeholder" class="image-slot">
              <el-image src="https://s4.music.126.net/style/web2/img/default/default_album.jpg"
                @click="getItem(item.id)" lazy></el-image>
            </div>
          </el-image>
          <el-tooltip :content="item.name" placement="top">
            <div class="desc">{{ item.name }}</div>
          </el-tooltip>
        </el-card>
      </div>
    </div>
    <!-- 分页器开始 -->
    <div class="block">
      <el-pagination @current-change="handleCurrentChange" :page-size="30" layout="total , prev, pager, next"
        :total="count">
      </el-pagination>
    </div>
    <div class="loading" v-if="show === true">
      <i class="el-icon-loading"></i>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import debounce from "@/utils/debounce.js";
export default {
  computed: {
    ...mapState(['seachSongItem']),
  },
  mounted() {
    this.keywords = window.sessionStorage.getItem('keywords');
    this.getData();
  },
  watch: {
    seachSongItem(newVal, oldVal) {
      this.keywords = window.sessionStorage.getItem('keywords');
      this.getData();
    },
  },
  data() {
    return {
      keywords: '',
      limit: 30, // 单页数量
      offset: 0, // 页数
      data: null,
      count: null,
      show: false,
    };
  },
  methods: {
    async getData() {
      this.$api
        .search({
          type: 100, // 歌手模式
          keywords: this.keywords,
          limit: this.limit,
          offset: this.offset,
          cookie: localStorage.getItem('cookie'),
        })
        .then((ret) => {
          this.count = ret.result.artistCount;
          this.data = ret.result.artists;
        });
    },

    handleCurrentChange: debounce(function (e) {
      this.offset = (e - 1) * 30;
      if (this.offset > this.count) {
        this.offset = (e - 1) * 30 - (this.offset - this.count) - 1;
        this.getData();
      } else {
        this.getData();
      }
       
    }, 1000),

    getItem(e) {
      this.show = true;
      window.sessionStorage.setItem('artists', e);
      this.$router.push(`/artistsPage?id=${e}`);
    },
  },
};
</script>

<style scoped>
.content {
  display: flex;
  flex-wrap: wrap;
}

.contentBox {
  margin-right: 5px;
}

.el-card {
  margin-bottom: 10px;
  cursor: pointer;
  width: 200px;
  position: relative;
}

.desc {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.arName {
  display: flex;
}

.el-image {
  height: 200px;
  width: 100%;
}

.name {
  margin-right: 5px;
  width: 50px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 10;
}

.loading {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}

.el-icon-loading {
  position: fixed;
  font-size: 50px;
  left: 50%;
  top: 50%;
  color: #ec4141;
}
</style>
